<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>我的信息</title>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}">
    <link rel="stylesheet" th:href="@{/css/semantic.min.css}">
    <script th:src="@{/layui/layui.js}"></script>
    <!--    一定需要引入这个包-->
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>

<!--分割线-->
<h2 class="ui center aligned blue icon header">
    <i class="circular user icon"></i>
    我的信息
</h2>
<!--分割线-->
<!--用户内容-->
<form class="layui-form" th:action="@{/tea/center/myinformation/updatesubmit}">
    <input name="id" th:value="${user.getId()}" type="hidden">
    <div class="layui-form-item">
        <label class="layui-form-label">用户名</label>
        <div class="layui-input-block">
            <input type="text" name="username" th:value="${user.getUsername()}" required  lay-verify="required|username" placeholder="请输入标题" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">密码框</label>
        <div class="layui-input-block">
            <input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">邮箱</label>
        <div class="layui-input-block">
            <input type="text" name="email" th:value="${user.getEmail()}" required  lay-verify="required|email"   class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">积分</label>
        <div class="layui-input-block">
            <input type="text" name="score" th:value="${user.getScore()}" required  lay-verify="required"   class="layui-input" readonly >
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">Birth</label>
            <div class="layui-input-block">
                <input type="text" class="layui-input" name="birth" lay-verify="required" th:value="${#dates.format(user.getBirth(),'yyyy-MM-dd')}" id="test1" placeholder="yyyy-MM-dd">
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit type="submit">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">恢复默认信息</button>
        </div>
    </div>
</form>
<!--用户内容-->

</body>
<script>
    //Demo
    layui.use('form', function(){
        var form = layui.form;
        form.verify({
            //将用户名是否可用作为验证条件 表单提交时触发
            username:function (value) {
                var datas={username: value};
                var message='';

                $.ajax({
                    type: "POST",
                    url:'/tea/checkmyname',
                    async: false, //改为同步请求
                    contentType:'application/json;charset=UTF-8',
                    data:JSON.stringify(datas),
                    dataType:'json',
                    success:function (data) {
                        if (data){

                        }else {
                            message="用户名已存在，请重新输入"
                        }

                    }
                });
//需要注意 需要将返回信息写在ajax方法外
                if (message !== '')
                    return message;
            },
            image: function (value, item) {
                if (!/\.(gif|jpg|jpeg|png|GIF|JPG|PNG)$/.test(value)) {
                    return '图片格式错误';
                }
            }

        });
    });
    $(document).ready(function () {
        layui.use('laydate', function(){
            var laydate = layui.laydate;

            //执行一个laydate实例
            laydate.render({
                elem: '#test1'
                ,type: 'date'//指定元素
            });
        });
    })
</script>
</html>